<template>
	<div>
		<svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" ></svg-icon>
	</div>
</template>

<script>
	LoadScriptThen("/vue/libs/screenfull.js").then(() => {

		module.exports = {
			name: 'Screenfull',
			data() {
				return {
					isFullscreen: false
				}
			},
			mounted() {
				this.init()
			},
			beforeDestroy() {
				this.destroy()
			},
			methods: {
				click() {
					if (!screenfull.isEnabled) {
						this.$message({
							message: 'you browser can not work',
							type: 'warning'
						})
						return false
					}
					screenfull.toggle()
				},
				change() {
					this.isFullscreen = screenfull.isFullscreen
				},
				init() {
					if (screenfull.enabled) {
						screenfull.on('change', this.change)
					}
				},
				destroy() {
					if (screenfull.enabled) {
						screenfull.off('change', this.change)
					}
				}
			}
		}
	});
</script>

<style scoped>
	.screenfull-svg {
		display: inline-block;
		cursor: pointer;
		fill: #5a5e66;
		;
		width: 20px;
		height: 20px;
		vertical-align: 10px;
	}
</style>
